<template>
  <div class="login">
    <!-- 切换登录方式 -->
    <van-tabs line-width="2.2rem">
      <!-- 采用密码登录的方式 -->
      <van-tab title="密码登录"  title-style="fontSize:0.5rem">
        <van-form @submit="doLogin">
          <!-- 
                    rules表单验证  required-输入框能否为空   message-验证失败的提示信息 
                    name 就是输入框表单名称
                -->
          <van-field
            v-model="username"
            name="account"
            label="账号"
            left-icon="user-o"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写账号' }]"
          />
          <van-field
            v-model="password"
            left-icon="lock"
            name="password"
            type="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
      </van-tab>
      <!-- 采用密码登录的方式 -->

      <!-- 采用手机登录的方式 -->
      <van-tab title="手机登录" title-style="fontSize:0.5rem">
        <van-form @submit="mobileLogin">
          <!-- 填写手机号 -->
          <van-field
            v-model="phone"
            name="phone"
            label="手机号"
            left-icon="user-o"
            placeholder="请输入手机号"
            :rules="[
              {
                required: true,
                message: '请输入正确的手机号',
                pattern: /^1[345678]\d{9}$/,
              },
            ]"
          />
          <!-- 填写验证码 -->
          <van-field
            v-model="captcha"
            left-icon="lock"
            name="captcha"
            type="text"
            label="验证码"
            placeholder="输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template v-slot:button>
              <van-button
                v-if="showBtn"
                type="warning"
                @click="send"
                size="small"
                native-type="button"
                >发送验证码</van-button
              >
              <van-badge v-if="!showBtn">
                <template #content>
                  <span>{{ countDown }}</span>
                </template>
              </van-badge>
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
    <!-- 切换登录方式 -->
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      phone: "",
      captcha: "",
      showBtn: true,
      key: "",
      countDown: 60,
      publicPath: process.env.BASE_URL, //获取当前环境变量里面 Base_URL public路径下.
    };
  },
  created() {
    this.axios.get("/api/verify_code").then((d) => {
      this.key = d.data.data.key;
    });
  },
  components: {},
  methods: {
    //van-form表单提交的时候触发的函数
    doLogin(values) {
      //name=>value
      console.log(values);
      //去服务器端登录
      this.$axios.post("api/login", values).then((d) => {
        //200是成功的状态码，不是200就代表登录没成功
        if (d.data.status != 200) {
          this.$dialog.alert({
            title: "登录失败",
            message: "账号或密码错误登录!失败",
          });
          return;
        }
        //把服务器返回的随机唯一的token存储到state里
        this.$store.commit("setToken", d.data.data.token);
        //异步分发 getUser ， 它里面的代码是存储用户数据到userInfo中
        this.$store.dispatch("getUser");
        //登录成功之后跳转到/我的页面
        setTimeout(() => {
          this.$router.push("/my");
        }, 500);
      });
    },
    // 点击获取验证码按钮是触发
    send() {
      //手机号不为空时获取请求数据
      if (this.phone) {
        this.axios
          .post("api/register/verify", {
            key: this.key,
            phone: this.phone,
            type: "login",
          })
          .then((d) => {
            if (d.data.status == 200) {
              this.showBtn = false;
              this.$toast("验证码发送成功!请输入验证码!");
            } else {
              this.$dialog.alert({
                title: "发送失败",
                message: d.data.msg,
              });
            }
          });
      } else {
        this.$dialog.alert({
          title: "发送失败",
          message: "手机号不能为空...",
        });
      }
    },

    // 手机号码登录方式下点击登录按钮时触发
    mobileLogin(values) {
      //验证....
      this.axios.post("/api/login/mobile", values).then((d) => {
        if (d.data.status == 200) {
          this.$toast("登录成功!");
          this.$store.commit("setToken", d.data.data.token);
          document.cookie = `token=${d.data.data.token}`;
          this.$store.dispatch("getUser");
          setTimeout(() => {
            this.$router.push("/my");
          }, 1000);
        } else {
          this.$dialog.alert({
            title: "登录失败!",
            message: d.data.msg,
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.login{
  width: 100vw;
  height: 100vh;
  background: rgb(133, 133, 113);
  position: relative;
  .van-tabs{
    position: absolute;
    width: 80vw;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    background: white;
  }
}
</style>

